import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, InputNumber, Select, message, Space } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import api from '../api';

const { Option } = Select;

const ImagingInfo = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingId, setEditingId] = useState(null);

  // 获取影像信息列表
  const fetchImaging = async () => {
    setLoading(true);
    try {
      const response = await api.get('/imaging');
      setData(response.data);
    } catch (error) {
      message.error('获取影像信息失败！');
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchImaging();
  }, []);

  // 处理表单提交
  const handleSubmit = async (values) => {
    try {
      if (editingId) {
        await api.put(`/imaging/${editingId}`, values);
        message.success('更新成功！');
      } else {
        await api.post('/imaging', values);
        message.success('添加成功！');
      }
      setModalVisible(false);
      form.resetFields();
      fetchImaging();
    } catch (error) {
      message.error('操作失败！');
    }
  };

  // 处理删除
  const handleDelete = async (id) => {
    try {
      await api.delete(`/imaging/${id}`);
      message.success('删除成功！');
      fetchImaging();
    } catch (error) {
      message.error('删除失败！');
    }
  };

  // 表格列定义
  const columns = [
    { title: '患者ID', dataIndex: 'patient_id', key: 'patient_id' },
    { title: '影像流水号', dataIndex: 'imaging_exam_number', key: 'imaging_exam_number' },
    { title: '检查时间', dataIndex: 'exam_time', key: 'exam_time' },
    { title: '血肿体积(mL)', dataIndex: 'hm_volume', key: 'hm_volume' },
    { title: '水肿体积(mL)', dataIndex: 'edema_volume', key: 'edema_volume' },
    { title: '血肿位置', dataIndex: 'hm_location', key: 'hm_location' },
    { title: '水肿位置', dataIndex: 'edema_location', key: 'edema_location' },
    { title: '血肿形状', dataIndex: 'hm_shape', key: 'hm_shape' },
    { title: '水肿形状', dataIndex: 'edema_shape', key: 'edema_shape' },
    { title: '血肿灰度分布', dataIndex: 'hm_gray', key: 'hm_gray' },
    { title: '水肿灰度分布', dataIndex: 'edema_gray', key: 'edema_gray' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type="primary" icon={<EditOutlined />} onClick={() => { setEditingId(record.id); form.setFieldsValue(record); setModalVisible(true); }}>编辑</Button>
          <Button type="primary" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditingId(null);
            form.resetFields();
            setModalVisible(true);
          }}
        >
          添加影像信息
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        loading={loading}
        rowKey="id"
        scroll={{ x: 1200 }}
      />

      <Modal
        title={editingId ? '编辑影像信息' : '添加影像信息'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
        destroyOnClose
      >
        <Form
          form={form}
          onFinish={handleSubmit}
          layout="vertical"
        >
          <Form.Item name="patient_id" label="患者ID" rules={[{ required: true, message: '请输入患者ID！' }]}> <Input /> </Form.Item>
          <Form.Item name="imaging_exam_number" label="影像流水号" rules={[{ required: true, message: '请输入影像流水号！' }]}> <Input /> </Form.Item>
          <Form.Item name="exam_time" label="检查时间" rules={[{ required: true, message: '请输入检查时间！' }]}> <Input /> </Form.Item>
          <Form.Item name="hm_volume" label="血肿体积(mL)"> <InputNumber min={0} style={{ width: '100%' }} /> </Form.Item>
          <Form.Item name="edema_volume" label="水肿体积(mL)"> <InputNumber min={0} style={{ width: '100%' }} /> </Form.Item>
          <Form.Item name="hm_location" label="血肿位置"> <Input /> </Form.Item>
          <Form.Item name="edema_location" label="水肿位置"> <Input /> </Form.Item>
          <Form.Item name="hm_shape" label="血肿形状"> <Input /> </Form.Item>
          <Form.Item name="edema_shape" label="水肿形状"> <Input /> </Form.Item>
          <Form.Item name="hm_gray" label="血肿灰度分布"> <Input /> </Form.Item>
          <Form.Item name="edema_gray" label="水肿灰度分布"> <Input /> </Form.Item>
          <Form.Item> <Button type="primary" htmlType="submit" block>提交</Button> </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ImagingInfo; 